<div class="layuimini-container layuimini-page-anim loukou">
    <div class="layuimini-main">
        <fieldset class="layui-elem-field layui-field-title loukou-title" style="margin-top: 20px;">
            <legend>智慧供热边缘控制系统</legend>
        </fieldset>
        <div class="layui-bg-gray" style="padding: 30px;">
            <div class="layui-row layui-col-space5">
                <div class="layui-col-md3">
                    <div class="loukou-col-config">
                        <span class="loukou-col-configname">电表读数：</span>
                        <span id="td_total_elec_energy">0.00</span>
                        <span>KWh</span>
                    </div>
                </div>
                <div class="layui-col-md3">
                    <div class="loukou-col-config">
                        <span class="loukou-col-configname">信号值：</span>
                        <span id="td_signl">0</span>
                        <span></span>
                    </div>
                </div>
                <div class="layui-col-md3">
                    <div class="loukou-col-config">
                        <span class="loukou-col-configname">是否在线：</span>
                        <span class="layui-badge" id="td1_on_line">离线</span>
                        <span class="layui-badge layui-bg-blue" id="td_on_line" style="display: none;">在线</span>
                    </div>
                </div>
                <div class="layui-col-md3">
                    <div class="loukou-col-config">
                        <span class="loukou-col-configname">时间：</span>
                        <span id="td_date">2023-02-23</span>&nbsp;
                        <span id="td_time">15:44:45</span>
                    </div>
                </div>
            </div>
            <div class="layui-row layui-col-space15">
                <div class="layui-col-md6">
                    <div class="layui-card">
                        <div class="layui-card-header">高区</div>
                        <div class="layui-card-body">
                            <div class="layui-form">
                                <table class="layui-table loukou-table">
                                    <tbody>
                                        <tr>
                                            <td>供水压力</td>
                                            <td id="td_press_water_in_h">0.00</td>
                                            <td>回水压力</td>
                                            <td id="td_press_water_out_h">0.00</td>
                                        </tr>
                                        <tr>
                                            <td>供水温度</td>
                                            <td id="td_water_temp_in_h">0.00</td>
                                            <td>回水温度</td>
                                            <td id='td_water_temp_out_h'>0.00</td>
                                        </tr>
                                        <tr>
                                            <td>累积流量</td>
                                            <td id="td_cumulative_flow_h">0.00</td>
                                            <td>瞬时流量</td>
                                            <td id="td_flow_rate_h">0.00</td>
                                        </tr>
                                        <tr>
                                            <td>累积热量</td>
                                            <td id="td_cumulative_heat_h">0.00</td>
                                            <td>热功率</td>
                                            <td id="td_heat_power_h">0.00</td>
                                        </tr>
                                        <tr>
                                            <td>阀门开度</td>
                                            <td id="td_kai_du_h">0</td>
                                            <td>压差</td>
                                            <td id="td_press_differ_h">0</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-col-md6">
                    <div class="layui-card">
                        <div class="layui-card-header">低区</div>
                        <div class="layui-card-body">
                            <div class="layui-form">
                                <table class="layui-table loukou-table">
                                    <tbody>
                                        <tr>
                                            <td>供水压力</td>
                                            <td id="td_press_water_in_l">0.00</td>
                                            <td>回水压力</td>
                                            <td id="td_press_water_out_l">0.00</td>
                                        </tr>
                                        <tr>
                                            <td>供水温度</td>
                                            <td id="td_water_temp_in_l">0.00</td>
                                            <td>回水温度</td>
                                            <td id='td_water_temp_out_l'>0.00</td>
                                        </tr>
                                        <tr>
                                            <td>累积流量</td>
                                            <td id="td_cumulative_flow_l">0.00</td>
                                            <td>瞬时流量</td>
                                            <td id="td_flow_rate_l">0.00</td>
                                        </tr>
                                        <tr>
                                            <td>累积热量</td>
                                            <td id="td_cumulative_heat_l">0.00</td>
                                            <td>热功率</td>
                                            <td id="td_heat_power_l">0.00</td>
                                        </tr>
                                        <tr>
                                            <td>阀门开度</td>
                                            <td id="td_kai_du_l">0</td>
                                            <td>压差</td>
                                            <td id="td_press_differ_l">0</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-row layui-col-space15">
                <div class="layui-row layui-col-md6">
                    <div class="layui-card">
                        <div class="layui-card-body">
                            <div style="width: 100%;height: 300px" id="myChartH"></div>
                        </div>
                        <div class="layui-row layui-col-space15" style="text-align: center;">
                            <div class="layui-row layui-col-md4">
                                <div class="layui-card-body">
                                    <button type="button" id="button_press"
                                        class="layui-btn layui-btn-normal  layui-btn-radius" lay-on='press'>压力</button>
                                </div>
                            </div>
                            <div class="layui-row layui-col-md4">
                                <div class="layui-card-body">
                                    <button type="button" id="button_temp"
                                        class="layui-btn layui-btn-primary layui-btn-radius" lay-on='temp'>温度</button>
                                </div>
                            </div>
                            <div class="layui-row layui-col-md4">
                                <div class="layui-card-body">
                                    <button type="button" id="button_flow_rate"
                                        class="layui-btn layui-btn-primary layui-btn-radius"
                                        lay-on='flow_rate'>瞬流</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-row layui-col-md6">
                    <div class="layui-card">
                        <div class="layui-card-body">
                            <div style="width: 100%;height: 300px" id="myChartL"></div>
                        </div>
                        <div class="layui-row layui-col-space15" style="text-align: center;">
                            <div class="layui-row layui-col-md4">
                                <div class="layui-card-body">
                                    <button type="button" id="button_pressL"
                                        class="layui-btn layui-btn-normal  layui-btn-radius" lay-on='pressL'>压力</button>
                                </div>
                            </div>
                            <div class="layui-row layui-col-md4">
                                <div class="layui-card-body">
                                    <button type="button" id="button_tempL"
                                        class="layui-btn layui-btn-primary layui-btn-radius" lay-on='tempL'>温度</button>
                                </div>
                            </div>
                            <div class="layui-row layui-col-md4">
                                <div class="layui-card-body">
                                    <button type="button" id="button_flow_rateL"
                                        class="layui-btn layui-btn-primary layui-btn-radius"
                                        lay-on='flow_rateL'>瞬流</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 为 ECharts 准备一个定义了宽高的 DOM，必须定义宽高才可以显示 -->

        <div class="layui-btn-container loukou-config-btn">
            <button type="button" class="layui-btn layui-btn-normal" lay-active='heat_config'>热表配置</button>
        </div>
        <div class="layui-btn-container loukou-config-btn">
            <button type="button" class="layui-btn layui-btn-normal" lay-active='com_config'>串口配置</button>
        </div>

    </div>
</div>
<script type="text/html" id="idTpl">
  <a class="layui-table-link">{{ d.slaveaddr }}</a>
</script>
<script>
    layui.config({
        version: 1,
        base: '../lib/' //这个就是你放echarts.js的目录
    }).use(['util', 'form', 'table', 'miniPage', 'element', 'echarts'], function () {
        var $ = layui.jquery,
            util = layui.util,
            form = layui.form,
            element = layui.element
        miniPage = layui.miniPage;
        echarts = layui.echarts;
        var myChartH = echarts.init(document.getElementById('myChartH'))
        var myChartL = echarts.init(document.getElementById('myChartL'))
        window.onresize = () => {
            myChartH.resize();
            myChartL.resize();
        }
        function loadData() {
            var datas = localStorage.getItem('LouKouData');
            if (datas != null) {
                var data = JSON.parse(datas)
                for (var key in data) {
                    if (key == 'on_line') {
                        if (data[key] == 0) {
                            $('#td1_' + key).show();
                            $('#td_' + key).hide();
                        } else {
                            $('#td1_' + key).hide();
                            $('#td_' + key).show();
                        }
                    } else {
                        $('#td_' + key).html(data[key]);
                    }
                }
            }
        }
        function openAddHeatConfigForm() {
            var content = miniPage.getHrefContent('page/loukou/heat-config.html');
            var openWH = miniPage.getOpenWidthHeight();

            var index = layer.open({
                title: '参数配置',
                type: 1,
                shade: 0.2,
                maxmin: false,
                shadeClose: true,
                area: ["850px", "570px"],
                // offset: [openWH[2] + 'px', openWH[3] + 'px'],
                content: content,
            });
        }
        function openAddComConfigForm() {
            var content = miniPage.getHrefContent('page/loukou/com-config.html');
            var openWH = miniPage.getOpenWidthHeight();

            var index = layer.open({
                title: '串口配置',
                type: 1,
                shade: 0.2,
                maxmin: false,
                shadeClose: true,
                area: ["850px", "570px"],
                // offset: [openWH[2] + 'px', openWH[3] + 'px'],
                content: content,
            });
        }
        util.event('lay-active', {
            heat_config: openAddHeatConfigForm
        });
        util.event('lay-active', {
            com_config: openAddComConfigForm
        });
        //高区
        function getpressValue() {
            option.title = {
                text: '高区供回压力趋势图'
            }
            option.legend = {
                data: ['供水压力', '回水压力']
            }
            option.series = [
                {
                    name: '供水压力',
                    data: press_water_in_h,
                    type: 'line',
                    smooth: true
                },
                {
                    name: '回水压力',
                    data: press_water_out_h,
                    type: 'line',
                    smooth: true
                }
            ]
            option && myChartH.setOption(option, true);
            if ($("#button_press").hasClass("layui-btn-primary")) {
                $("#button_press").toggleClass("layui-btn-primary").toggleClass("layui-btn-normal");
            }
            if ($("#button_temp").hasClass("layui-btn-normal")) {
                $("#button_temp").toggleClass("layui-btn-normal").toggleClass("layui-btn-primary");
            }
            if ($("#button_flow_rate").hasClass("layui-btn-normal")) {
                $("#button_flow_rate").toggleClass("layui-btn-normal").toggleClass("layui-btn-primary");
            }
        }
        function gettempValue() {
            option.title = {
                text: '高区供回温度趋势图'
            }
            option.legend = {
                data: ['供水温度', '回水温度']
            }
            option.series = [
                {
                    name: '供水温度',
                    data: water_temp_in_h,
                    type: 'line',
                    smooth: true
                },
                {
                    name: '回水温度',
                    data: water_temp_out_h,
                    type: 'line',
                    smooth: true
                }
            ]
            option && myChartH.setOption(option, true);
            if ($("#button_press").hasClass("layui-btn-normal")) {
                $("#button_press").toggleClass("layui-btn-normal").toggleClass("layui-btn-primary");
            }
            if ($("#button_temp").hasClass("layui-btn-primary")) {
                $("#button_temp").toggleClass("layui-btn-primary").toggleClass("layui-btn-normal");
            }
            if ($("#button_flow_rate").hasClass("layui-btn-normal")) {
                $("#button_flow_rate").toggleClass("layui-btn-normal").toggleClass("layui-btn-primary");
            }
        }
        function getflow_rateValue() {
            option.title = {
                text: '高区瞬时流量趋势图'
            }
            option.legend = {
                data: ['瞬时流量']
            }
            option.series = [
                {
                    name: '瞬时流量',
                    data: flow_rate_h,
                    type: 'line',
                    smooth: true
                }
            ]
            myChartH.setOption(option, true);
            if ($("#button_press").hasClass("layui-btn-normal")) {
                $("#button_press").toggleClass("layui-btn-normal").toggleClass("layui-btn-primary");
            }
            if ($("#button_temp").hasClass("layui-btn-normal")) {
                $("#button_temp").toggleClass("layui-btn-normal").toggleClass("layui-btn-primary");
            }
            if ($("#button_flow_rate").hasClass("layui-btn-primary")) {
                $("#button_flow_rate").toggleClass("layui-btn-primary").toggleClass("layui-btn-normal");
            }
        }
        //低区
        function getpressLValue() {
            optionL.title = {
                text: '低区供回压力趋势图'
            }
            optionL.legend = {
                data: ['供水压力', '回水压力']
            }
            optionL.series = [
                {
                    name: '供水压力',
                    data: press_water_in_l,
                    type: 'line',
                    smooth: true
                },
                {
                    name: '回水压力',
                    data: press_water_out_l,
                    type: 'line',
                    smooth: true
                }
            ]
            optionL && myChartL.setOption(optionL, true);
            if ($("#button_pressL").hasClass("layui-btn-primary")) {
                $("#button_pressL").toggleClass("layui-btn-primary").toggleClass("layui-btn-normal");
            }
            if ($("#button_tempL").hasClass("layui-btn-normal")) {
                $("#button_tempL").toggleClass("layui-btn-normal").toggleClass("layui-btn-primary");
            }
            if ($("#button_flow_rateL").hasClass("layui-btn-normal")) {
                $("#button_flow_rateL").toggleClass("layui-btn-normal").toggleClass("layui-btn-primary");
            }
        }
        function gettempLValue() {
            optionL.title = {
                text: '低区供回温度趋势图'
            }
            optionL.legend = {
                data: ['供水温度', '回水温度']
            }
            optionL.series = [
                {
                    name: '供水温度',
                    data: water_temp_in_l,
                    type: 'line',
                    smooth: true
                },
                {
                    name: '回水温度',
                    data: water_temp_out_l,
                    type: 'line',
                    smooth: true
                }
            ]
            optionL && myChartL.setOption(optionL, true);
            if ($("#button_pressL").hasClass("layui-btn-normal")) {
                $("#button_pressL").toggleClass("layui-btn-normal").toggleClass("layui-btn-primary");
            }
            if ($("#button_tempL").hasClass("layui-btn-primary")) {
                $("#button_tempL").toggleClass("layui-btn-primary").toggleClass("layui-btn-normal");
            }
            if ($("#button_flow_rateL").hasClass("layui-btn-normal")) {
                $("#button_flow_rateL").toggleClass("layui-btn-normal").toggleClass("layui-btn-primary");
            }
        }
        function getflow_rateLValue() {
            optionL.title = {
                text: '低区瞬时流量趋势图'
            }
            optionL.legend = {
                data: ['瞬时流量']
            }
            optionL.series = [
                {
                    name: '瞬时流量',
                    data: flow_rate_l,
                    type: 'line',
                    smooth: true
                }
            ]
            myChartL.setOption(optionL, true);
            if ($("#button_pressL").hasClass("layui-btn-normal")) {
                $("#button_pressL").toggleClass("layui-btn-normal").toggleClass("layui-btn-primary");
            }
            if ($("#button_tempL").hasClass("layui-btn-normal")) {
                $("#button_tempL").toggleClass("layui-btn-normal").toggleClass("layui-btn-primary");
            }
            if ($("#button_flow_rateL").hasClass("layui-btn-primary")) {
                $("#button_flow_rateL").toggleClass("layui-btn-primary").toggleClass("layui-btn-normal");
            }
        }
        util.on('lay-on', {
            'press': getpressValue,
            'temp': gettempValue,
            'flow_rate': getflow_rateValue
        })
        util.on('lay-on', {
            'pressL': getpressLValue,
            'tempL': gettempLValue,
            'flow_rateL': getflow_rateLValue
        })
        loadData();
        var time = []
        if (localStorage.getItem('time') != null) {
            time = JSON.parse(localStorage.getItem('time'));
        }
        //高区
        var press_water_in_h = []
        if (localStorage.getItem('press_water_in_h') != null) {
            press_water_in_h = JSON.parse(localStorage.getItem('press_water_in_h'));
        }
        var press_water_out_h = []
        if (localStorage.getItem('press_water_out_h') != null) {
            press_water_out_h = JSON.parse(localStorage.getItem('press_water_out_h'));
        }
        var water_temp_in_h = []
        if (localStorage.getItem('water_temp_in_h') != null) {
            water_temp_in_h = JSON.parse(localStorage.getItem('water_temp_in_h'));
        }
        var water_temp_out_h = []
        if (localStorage.getItem('water_temp_out_h') != null) {
            water_temp_out_h = JSON.parse(localStorage.getItem('water_temp_out_h'));
        }
        var flow_rate_h = []
        if (localStorage.getItem('flow_rate_h') != null) {
            flow_rate_h = JSON.parse(localStorage.getItem('flow_rate_h'));
        }
        //低区
        var press_water_in_l = []
        if (localStorage.getItem('press_water_in_l') != null) {
            press_water_in_l = JSON.parse(localStorage.getItem('press_water_in_l'));
        }
        var press_water_out_l = []
        if (localStorage.getItem('press_water_out_l') != null) {
            press_water_out_l = JSON.parse(localStorage.getItem('press_water_out_l'));
        }
        var water_temp_in_l = []
        if (localStorage.getItem('water_temp_in_l') != null) {
            water_temp_in_l = JSON.parse(localStorage.getItem('water_temp_in_l'));
        }
        var water_temp_out_l = []
        if (localStorage.getItem('water_temp_out_l') != null) {
            water_temp_out_l = JSON.parse(localStorage.getItem('water_temp_out_l'));
        }
        var flow_rate_l = []
        if (localStorage.getItem('flow_rate_l') != null) {
            flow_rate_l = JSON.parse(localStorage.getItem('flow_rate_l'));
        }
        option = {
            title: {
                text: '高区供回压力趋势图'
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: ['供水压力', '回水压力']
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            // toolbox: {
            //     feature: {
            //         saveAsImage: {}
            //     }
            // },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: time
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    name: '供水压力',
                    data: press_water_in_h,
                    type: 'line',
                    smooth: true
                },
                {
                    name: '回水压力',
                    data: press_water_out_h,
                    type: 'line',
                    smooth: true
                }
            ]
        };
        option && myChartH.setOption(option);

        optionL = {
            title: {
                text: '低区供回压力趋势图'
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: ['供水压力', '回水压力']
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            // toolbox: {
            //     feature: {
            //         saveAsImage: {}
            //     }
            // },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: time
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    name: '供水压力',
                    data: press_water_in_l,
                    type: 'line',
                    smooth: true
                },
                {
                    name: '回水压力',
                    data: press_water_out_l,
                    type: 'line',
                    smooth: true
                }
            ]
        };
        optionL && myChartL.setOption(optionL);

        // ws = new WebSocket('ws://localhost:8082/Websocket/ws');
        const hostname = window.location.hostname
        const port = window.location.port
        ws = new WebSocket('ws://' + hostname + ':' + port + '/Websocket/ws');
        ws.binaryType = 'arraybuffer'; // "blob";//
        ws.onopen = () => {
            var sdata = {};
            sdata["name"] = "test"
            sdata["type"] = "test"
            sdata["Data"] = "test"
            //ws.send(JSON.stringify(sdata));
        };

        ws.onmessage = (msg) => {

            if (msg != null && msg != undefined && msg.data != null && msg.data != undefined)
                var data = JSON.parse(msg.data).Data
            var type = JSON.parse(msg.data).Type
            if (data != null && data != undefined && type != null && type != undefined) {
                if (type == "3") {
                    //数据           
                    localStorage.setItem('LouKouData', JSON.stringify(data));
                    loadData()
                    if (time.length > 10) {
                        time.shift();
                        press_water_in_h.shift();
                        press_water_out_h.shift();
                        water_temp_in_h.shift();
                        water_temp_out_h.shift();
                        flow_rate_h.shift();
                        //低区
                        press_water_in_l.shift();
                        press_water_out_l.shift();

                        water_temp_in_l.shift();
                        water_temp_out_l.shift();
                        flow_rate_l.shift();
                    }
                    time.push(data.time.substring(5))
                    localStorage.setItem('time', JSON.stringify(time));
                    //高区                 
                    press_water_in_h.push(data.press_water_in_h)
                    localStorage.setItem('press_water_in_h', JSON.stringify(press_water_in_h));
                    press_water_out_h.push(data.press_water_out_h)
                    localStorage.setItem('press_water_out_h', JSON.stringify(press_water_out_h));
                    water_temp_in_h.push(data.water_temp_in_h)
                    localStorage.setItem('water_temp_in_h', JSON.stringify(water_temp_in_h));
                    water_temp_out_h.push(data.water_temp_out_h)
                    localStorage.setItem('water_temp_out_h', JSON.stringify(water_temp_out_h));
                    flow_rate_h.push(data.flow_rate_h)
                    localStorage.setItem('flow_rate_h', JSON.stringify(flow_rate_h));
                    //低区
                    press_water_in_l.push(data.press_water_in_l)
                    localStorage.setItem('press_water_in_l', JSON.stringify(press_water_in_l));
                    press_water_out_l.push(data.press_water_out_l)
                    localStorage.setItem('press_water_out_l', JSON.stringify(press_water_out_l));
                    water_temp_in_l.push(data.water_temp_in_l)
                    localStorage.setItem('water_temp_in_l', JSON.stringify(water_temp_in_l));
                    water_temp_out_l.push(data.water_temp_out_l)
                    localStorage.setItem('water_temp_out_l', JSON.stringify(water_temp_out_l));
                    flow_rate_l.push(data.flow_rate_l)
                    localStorage.setItem('flow_rate_l', JSON.stringify(flow_rate_l));
                    option && myChartH.setOption(option);
                    optionL && myChartL.setOption(optionL);
                }
            }
        }


    });
</script>